<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas {
				border: 1px solid;
				background-color: #999395;
			}
		</style>
	</head>


	<body>
		<canvas id="mycanvas" width="1200" height="1200"></canvas>
		<script type="text/javascript">
			var huabi = document.getElementById("mycanvas").getContext("2d");


			var rot = 0;
			var t = 10;
			var l = 10;
			var tl = 10;
			var ll = 10;
			setInterval(function() {
				huabi.clearRect(0, 0, 1300, 1000)
				var y = Math.sin(rot / 180 * Math.PI) * 50;
				var x = Math.cos(rot / 180 * Math.PI) * 50;


				huabi.arc(l, t, 100, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();
				huabi.beginPath();
				huabi.arc(l, t, 100, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				huabi.fillStyle = "white";
				huabi.fill();


				huabi.beginPath();
				huabi.arc(l + x, t + y, 50, 0, 2 * Math.PI);
				huabi.fillStyle = "white";
				huabi.fill();


				huabi.beginPath();


				huabi.arc(l - x, t - y, 50, 0, 2 * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();


				huabi.beginPath()
				huabi.arc(l + x, t + y, 20, 0, 2 * Math.PI);
				huabi.fillStyle = "black";
				huabi.fill();
				huabi.beginPath()
				huabi.arc(l - x, t - y, 20, 0, 2 * Math.PI);
				huabi.fillStyle = "white";
				huabi.fill();
				rot = rot + 5;
				l = l + ll;
				t = t + tl;
				if(t > 500) {
					tl = -10;
				}
				if(t < 100) {
					tl = 10;
				}
				if(l > 1000) {
					ll = -10;
				}
				if(l < 100) {
					ll = 10;
				}


			}, 20)



		</script>
	</body>


</html>
